<template>
  <div>
    <el-card class="statuscard">
      <div slot="header" class="clearfix">
        <b align="left">全部集群状态</b> <br />
        <i class="el-icon-success" style="color: #00ff00"></i>正常 {{ ok }}<br />
        <i class="el-icon-warning" style="color: #ff0000"></i>异常 {{ notOk }}
      </div>

      <el-table :data="clusterTableData.pod_list" border height="500">
        <el-table-column label="ID" width="50">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="pod" width="100">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column label="状态" width="50">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <i class="el-icon-success" style="color: #00ff00" v-if="(scope.row.status == 1)"></i>
            <i class="el-icon-warning" style="color: #ff0000" v-else></i>
          </template>
        </el-table-column>

        <el-table-column label="主机IP" width="150">
          <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.row.hosts_ip }}</span>
          </template>
        </el-table-column>

        <el-table-column label="cpu使用状况" width="100">
              <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.row.cpu }}</span>
          </template>
        </el-table-column>

        <el-table-column label="内存使用状况" width="100">
           <template slot-scope="scope">
            <!-- <i class="el-icon-time"></i> -->
            <span style="margin-left: 10px">{{ scope.row.ram }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card class="hostcard">
      <div slot="header" class="info_hosts">
        <el-button
          type="primary"
          class="addhost"
          icon="el-icon-edit"
          @click="scancluster"
          >扫描集群</el-button>
        <!-- <addhost style="float: right; padding: 3px 0" @refreash="getinfo"> </addhost> -->
      </div>
      <div slot="header">
        <addcluster></addcluster>
      </div>

      <div>
        <el-table :data="clusterTableData" height="600" border @row-click="clickData">
          <!-- <el-table :data="clusterTableData" style="width: 100%"> -->
          <el-table-column label="ID" width="50">
            <template slot-scope="scope">
              <!-- <i class="el-icon-time"></i> -->
              <span style="margin-left: 10px">{{ scope.$index+1 }}</span>
            </template>
          </el-table-column>

          <el-table-column label="集群名称" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.name }}</span>
            </template>
          </el-table-column>

          <el-table-column label="状态" width="60">
            <template slot-scope="scope">
              <i class="el-icon-success" style="color: #00ff00" v-if="(scope.row.status == 1)"></i>
              <i class="el-icon-warning" style="color: #ff0000" v-else></i>
            </template>
          </el-table-column>

          <el-table-column label="所属者" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
              <br>
              <span>({{ scope.row.nickname }})</span>
            </template>
          </el-table-column>

          <el-table-column label="集群类型" width="100">
            <template slot-scope="scope">
              <span v-if="(scope.row.types = 1)">spark集群</span>
              <span v-else>hadoop集群</span>
            </template>
          </el-table-column>

          <el-table-column label="最近更新时间" width="160">
            <template slot-scope="scope">
               <span>{{ scope.row.update_at }}</span>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="showDialog(scope.row['id'])"
                >分配</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <!--  分配集群弹窗-->
    <el-dialog title="分配集群" :visible.sync="userDialogVisible">
     <el-form>
      <el-form-item label="用户" :label-width="formLabelWidth">
        <el-select v-model="value" placeholder="请选择" @change="change()">
          <el-option
          v-for="item in userOptions"
          :key="item.id"
          :label="item.nickname"
          :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="userDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleEdit(value)">确 定</el-button>
    </div>
   </el-dialog>
  </div>
</template>
<style scoped>
.statuscard {
  position: absolute;
  left: 50px;
  top: 100px;
  width: 600px;
  height: 80%;
}
.hostcard {
  position: absolute;
  left: 700px;
  top: 100px;
  width: 800px;
  height: 80%;
}
</style>

<script>
import Axios from "axios";
import addcluster from "../../components/addcluster.vue";
import qs from "qs";
var new_id;
export default {
  created() {
    this.getinfo();
    this.init();
  },
  data() {
    return {
      value: "",
      formLabelWidth: "120px",
      userDialogVisible: false,
      ok: "",
      notOk: "",
      clusterTableData: [
        {
          id: "",
          name: "",
          types: "",
          user_id: "",
          status: "",
          create_at: "",
          update_at: "",
          username: "",
          nickname: "",
          pod_list: [
            {
              id: "",
              name: "",
              status: "",
              hosts_ip: "",
              cluster_name: "",
              cpu: "",
              ram: "",
            },
          ],
        },
      ],
      userOptions: [
        {
          id: "",
          username: "",
          nickname: "",
          status: "",
          create_at: "",
          update_at: "",
        },
      ],
    };
  },
  methods: {
    change(){
      this.$forceUpdate()
    },
    showDialog(id){
      // console.log("1111111111111111111111111")
      this.userDialogVisible = true;
      new_id = id;
    },
    handleEdit(value) {
      this.userDialogVisible = false;
      var url = "/cluster/update/" + new_id;
          Axios.post(
            url,
            qs.stringify({
              user_id: value,
            })
          ).then((res) => {
            if (res.data.state == 1) {
              this.$message({
                type: "success",
                message: res.data.msg,
              });
            } else {
              this.$message({
                type: "error",
                message: res.data.msg,
              });
            }
          })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
      location.reload();
    },
    handleDelete(row) {
       /*提示消息*/
       this.$confirm('此操作将永久删除该集群, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          Axios.get("/cluster/delete/" + row['id']).then((res) => {
              this.$message({
              type: 'success',
              message: res.data.msg
            });
              location.reload();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    clickData(row) {
      this.clusterTableData = row;
      console.log(row);
    },
    scancluster: function () {
      Axios.get("cluster/refresh").then((res) => {
        this.clusterTableData = res.data.msg;
        this.ok = res.data.ok;
        this.notOk = res.data.notOk;
        location.reload();
      });
    },
    getinfo: function () {
      Axios.get("/cluster").then((res) => {
        this.clusterTableData = res.data.msg;
        this.ok = res.data.ok;
        this.notOk = res.data.notOk;
      });
    },
    init: function (){
      Axios.get("/user").then((res) => {
        this.userOptions = res.data.msg;
      });
    }
  },
  components: { addcluster, },
};
</script>